<template>
  <div :class='classList'>
    <tab custom-bar-width="30px" line-width="3" :animate="true">
      <tab-item v-for="(item,index) in getListData" :key="index" :selected="index==selectedIndex" @on-item-click="onItemClick(item,index)"><span class="pr">{{item.name}}<span v-if="item.num" class="pa meta">{{item.num}}</span></span></tab-item>
    </tab>
  </div>
</template>
<script>
import { Tab, TabItem } from "vux";
export default {
  props:["listData","selected","className"],
  components: {Tab, TabItem},
  name: "",
  data() {
    return {
      selectedIndex:0,
      classList:{
        tab:true,
      }
    };
  },
  computed:{
    getListData(){

      for(var key in this.className||{}){
        this.classList[key]=this.className[key]
      }

      this.selectedIndex=this.selected
      return this.listData||[]
    }
  },
  methods: {
    onItemClick(item,index){
      item.click(item,index)
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.tab {
  background-color: #fff;
  padding-bottom: 5px;
  box-sizing: border-box;

  .meta{
    font-size: 10px;
    top: 0;
    right: 0;
    height: 10px;
    line-height: 12px;
    padding: 1px;
    background-color: #FF6161;
    color: #fff;
    transform: translate(100%,-60%);
  }
  .meta::after{
    content: "";
    position: absolute;
    top: 95%;
    left:10%;
    border: 5px solid transparent;
    border-top: 5px solid #FF6161;
    border-left: 0px;
    z-index: 10;
  }
}
</style>